<template>
  <view class="sigin" v-if="frames.status!=0">
    <view class="siginHeader">
      
    </view>
    <view class="siginRili">
      <view class="flex flex-align flex-center">
        <view class="homeTitle"><text>团长规则说明</text></view>
      </view>
       <view class="wenzi">让天下易者都可以拥有施展能力的舞台，让人生的所有未知与迷茫者都可以迎刃而解，传承国学，弘扬传统文化。国家繁荣昌盛，人民安居乐业。</view>
    </view>
    <view class="teamList">
      <view class="list">
        <view class="name">姓名 <text>*</text></view>
        <view class="input">
          <input type="text" placeholder="请输入您的真实姓名" placeholder-style="color:#323233" v-model="frames.name">
        </view>
      </view>
      <view class="list">
        <view class="name">手机号 <text>*</text></view>
        <view class="input">
          <input type="text" placeholder="请输入您的手机号" placeholder-style="color:#323233" v-model="frames.phone">
        </view>
      </view>
      <view class="list">
        <view class="name">代理邀请码 <text>*</text></view>
        <view class="input">
          <input type="text" placeholder="请输入您要绑定的代理邀请码" placeholder-style="color:#323233" v-model="frames.from_inviter_code">
        </view>
      </view>
      <view class="list">
        <view class="name">站点名称 <text>*</text></view>
        <view class="input">
          <input type="text" placeholder="请输入站点名称" placeholder-style="color:#323233" v-model="frames.store_name">
        </view>
      </view>
      <view class="list">
        <view class="name">门店所在地区 <text>*</text></view>
        <view class="input flex flex-align" style="padding-right: 20rpx;">
          <uni-data-picker class="my-data-picker" v-slot:default="{data, error, options}" :ellipsis="true"  :localdata="areaData" popup-title="请选择地区" @change="onchange" @nodeclick="onnodeclick">
            <view class="selected-item">
              {{frames.selectedValue}}
              
            </view>
          </uni-data-picker>
          <uni-icons type="right" size="16" color="#333"></uni-icons>
        </view>
      </view>
      <view class="list">
        <view class="name">门店详细地址 <text>*</text></view>
        <view class="input">
          <input type="text" placeholder="请输入您的门店详细地址" placeholder-style="color:#323233" v-model="frames.address">
        </view>
      </view>
      <view class="list">
        <view class="name">门头照 <text>*</text></view>
        <view class="listImg">
          <uni-file-picker 
          v-model="imageValue"
          :image-styles="imageStyles"
          limit="1"
          fileMediatype="image" 
          mode="grid" 
          @select="select" 
          @delete="deletes"
        >
          <view class="upLoadImg flex flex-center flex-align">
            <view class="example-body__item__image">
              <image src="@/static/shop/shop10.png" mode="scaleToFill" />
              <view>上传</view>
            </view>
          </view>
        </uni-file-picker >
        </view>
      </view>
    </view>
    <view class="goLive" @click="applyTeam">确认提交</view>
  </view>
  <view class="team-shenhe" v-if="frames.status==0">
    <noData acImg="/static/nodata/shenhe.png" content="审核中" width="360rpx" color="#323233"></noData>  
    <view class="flexs">您已申请团长，平台审核中，请耐心等待</view>
    <view class="btns" @click="goback">返回</view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import areaData from '@/utils/city.json'
import { getImgUrl, uploadFile } from '@/utils/tools';
import noData from '@/components/noData.vue'
import { applyGroup, applyGroupStatus, uploadImg } from '@/api/user';
import { onLoad } from '@dcloudio/uni-app';
import { useAuthStore } from '@/stores/counter'
const store=useAuthStore();
console.log(store.dataUser)
onLoad(()=>{
  getApplyTeam()
})
const onchange = (e:any) => {
  console.log(e);
  frames.province = e.detail.value[0].text
  frames.city = e.detail.value[1].text
  frames.area = e.detail.value[2].text
  frames.selectedValue = frames.province+frames.city+frames.area
}
const onnodeclick = (e:any) => {
  console.log(e);

}
const frames = reactive({
  name:'',
  phone:'',
  from_inviter_code:'',
  store_name:'',
  address:'',
  image:'',
  province:'',
  city:'',
  area:'',
  longitude:'',
  latitude:'',
  selectedValue: '请选择地址',
  status:999,
})
const imageValue = ref<Array<{url: string,extname: string,name:string}>>([])
const imageStyles={
  width:'208rpx',
  height:'208rpx',
  background:'#F5F6F7',
}
const select = (e: any) => {
  // uploadImg({file:e.tempFilePaths[0]}).then((res:any)=>{
  //   console.log(res)
  // })
  uploadFile(e.tempFilePaths[0]).then((res:any)=>{
    frames.image=res.fileName
    imageValue.value = [{
      url: getImgUrl(res.fileName),
      extname: 'png',
      name: 'shuijiao.png'
    }]
  })
}
const goback = () => {
  uni.navigateBack()
}
const deletes = (e: any) => {
  console.log(e);
}
// 申请团长
const applyTeam = async () => {
  if(Object.keys(store.storeInfo).length!=0){
    uni.showToast({
      title: '请先解除团长再申请',
      icon:'none',
      duration: 1000
    })
    return
  }
  uni.showLoading({
    title: '加载中',
    mask: true,
  })
  applyGroup(frames).then((res:any)=>{
    uni.showToast({
      title: '申请成功',
      icon: 'success',
      duration: 1000
    })
    setTimeout(() => {
      uni.navigateBack()
    }, 1000);
  }).catch((err:any)=>{
    console.log(err)
  })
}
// 获取申请团长状态
const getApplyTeam = () => {
 
  applyGroupStatus().then((res:any)=>{
    if(res){
      frames.status=res.status
      let imgs ={
        url: '',
        extname: 'png',
        name: 'shuijiao.png'
      }
      if(frames.status==2||frames.status==1){
        frames.name=res.name
        frames.phone=res.phone
        frames.from_inviter_code=res.from_inviter_code
        frames.store_name=res.store_name
        frames.address=res.address
        frames.province=res.province
        frames.city=res.city
        frames.area=res.area
        frames.selectedValue=res.province+res.city+res.area
        frames.image=res.image
        frames.longitude=res.longitude
        frames.latitude=res.latitude
        imgs.url=getImgUrl(res.image)
        imageValue.value = [{
          url: getImgUrl(res.image),
          extname: 'png',
          name: 'shuijiao.png'
        }]
      }
    }
  })
}
</script>

<style scoped lang="scss">
.team-shenhe{padding-top: 6vh;
  .flexs{color: #969799;text-align: center;margin: 20rpx;
 }
 .btns{width: 300rpx;height:80rpx;background: linear-gradient(to right,#FE7431,#FE7431);border-radius: 80rpx;color: #fff;font-size: 30rpx;line-height: 80rpx;text-align: center;margin: 30rpx auto;}
}
.sigin{padding-bottom: 20rpx;background:#FFE5BD;height:100vh;overflow-y: auto;
  .siginHeader{background-image: url('@/static/team/team01.png');background-repeat: no-repeat;background-size: 100% 100%;width: 100%;height:600rpx ;
    box-sizing: border-box;padding:300rpx 30rpx 0;
  }
}
.siginRili{padding-bottom: 50rpx;background: #fff;border-radius: 30rpx;box-shadow: inset 0 0 24px rgba($color: #FFECD9, $alpha: .7);
  margin: -130rpx 30rpx 20rpx;padding:10rpx 30rpx 60rpx;
  .wenzi{color: #646566;font-size: 26rpx;}
 .homeTitle{
  text{text-align: center;}
 }
 .homeTitle::after{width: 190rpx;}
.guize{background: #fff;margin: 30rpx;padding: 30rpx;border-radius: 20rpx;box-shadow: inset 0 0 24px rgba($color: #FE9640, $alpha: .5);border: 2px solid #fff;
  .list{color: #646566;font-size: 28rpx;padding-bottom: 20rpx;}
}
}
.teamList{padding:30rpx;box-shadow: inset 0 0 24px rgba($color: #FFECD9, $alpha: .7);background: #fff;border-radius: 30rpx;margin:0 30rpx 20rpx;
  .list{margin-bottom:30rpx;
    .name{color: #969799;font-size: 26rpx;
      text{color: #ff6214}
    }
   .input{background: #F5F6F7;border-radius: 20rpx;margin:20rpx 0;border-radius: 60rpx;
     input{width: 100%;height: 80rpx;border: none;background: none;box-sizing: border-box;padding: 0 30rpx;font-size: 28rpx;color: #323233;}
     .my-data-picker{
        padding:30rpx;
        .selected{color: #333;width: 100%;height: 80rpx;line-height:80rpx;font-size: 28rpx;
          .selected-item{display: inline-block;}
        }
     }
  }
  .listImg{margin-top: 20rpx;
    .upLoadImg{text-align: center;width: 180rpx;height:180rpx;background: #F5F6F7;
      image{
        width: 70rpx;height: 70rpx;
      }
    }
  }
 }
}
.goLive{width: 620rpx;height:88rpx;background: linear-gradient(to right,#FE7431,#FE7431);border-radius: 88rpx;color: #fff;font-size: 26rpx;text-align: center;line-height: 88rpx;
    margin:20rpx auto 0;}

</style>